﻿<template>
  <div>
    <el-dialog :title = 'dialogSelectTitle' :visible.sync = 'dialogSelectVisible' :width = 'dialogWidth'
    :before-close = 'closeDialog' append-to-body :close-on-click-modal = 'false' :close-on-press-escape = 'false'
    class = 'md_dialog'>
      <el-form ref = 'ruleForm' :model= 'formModel' v-loading = 'loading' :element-loading-text = 'loadingText'>
        <el-form-item label-position = 'top'>
          <!-- 多行文本 -->
          <div v-if = "uiType === 'TextArea'">
            <el-input :disabled = "isDisabled" v-model = 'formModel.editData' placeholder = '请输入' type = 'textarea' autosize></el-input>
          </div>
          <!-- 单个文件/多个文件 -->
          <template v-else-if = "uiType === 'File' || uiType === 'Files'">
            <fm-upload :dataModel.sync = "formModel.editData" :widget = 'editElementObj' :showEditElementDataDialog = 'showEditElementDataDialog'>
            </fm-upload>
          </template>
          <!-- 单个图片/多个图片 -->
          <template v-else-if = "uiType === 'Picture' || uiType === 'Pictures'">
            <fm-upload-Pic :dataModel.sync = "formModel.editData" :widget = 'editElementObj' :showEditElementDataDialog = 'showEditElementDataDialog'>
            </fm-upload-Pic>
          </template>
          <!-- 富文本 -->
          <div v-else-if = "uiType === 'RichText'">
            <Tinymce-Component ref = "myTinymce" :disabled = "isDisabled"
            :defaultValue.sync = 'formModel.editData' :showTinymce = 'showEditElementDataDialog'></Tinymce-Component>
          </div>
          <!-- md编辑器 -->
          <div v-else-if = "uiType === 'MD'">
            <Editor-Md ref = "myMD" :disabled = "isDisabled"
            :defaultValue.sync = 'formModel.editData' :showMD = 'showEditElementDataDialog'></Editor-Md>
          </div>
          <!-- JSONEditor编辑器 -->
          <div v-else-if = "uiType === 'JSONEditor'">
            <Editor-Md-Json ref = "myJSONEditor" :disabled = "isDisabled"
            :defaultValue.sync = 'formModel.editData' :showMDJson = 'showEditElementDataDialog'></Editor-Md-Json>
          </div>
          <!-- pop弹窗 -->
          <div v-else-if = "uiType === 'Pop' || uiType === 'MultiPop'">
            <Pop-Select ref = "myPopSelect" :disabled = "isDisabled" :defaultValue.sync = 'formModel.editData' :showPopDialog = 'showEditElementDataDialog'
            :editElementObj = 'editElementObj' :currentPageModelsObj = 'currentPageModelsObj' from = 'dynamic'></Pop-Select>
          </div>
          <!-- 地图 -->
          <div v-else-if = "uiType === 'MapXY'">
            <span v-if = " !isDisabled">请点击地图获取经纬度</span>
            <span v-if = "isDisabled">查看该字段的经纬度信息</span>
            <div>
              <p style = 'margin-bottom:10px;margin-right: 20px;display:inline-block'>经度为：<el-input disabled v-model = 'location.lng'></el-input></p>
              <p style = 'margin-bottom:10px;display:inline-block'>纬度为：<el-input disabled v-model = 'location.lat'></el-input></p>
              <div id = 'myMap' v-if = "dialogSelectVisible && uiType === 'MapXY'"></div>
            </div>
          </div>
          <!-- 地图Gis -->
          <div v-else-if = "uiType === 'GIS_Draw_Line'">
            <el-row style = 'margin-bottom: 5px;' :gutter = '20'>
              <el-col :span = '5' v-if = "!isDisabled">
                <span>左键点击地图开始绘制,点击右键完成绘制</span>
              </el-col>
              <el-col :span = '4'>
                <el-input v-model = 'drawArea' placeholder = '请输入需要展示的行政区、市或省名称' :disabled = 'isDisabled'>
                  <el-button v-if = "!isDisabled" slot = "append" type = 'primary' @click = 'drawBounds'>绘制区域</el-button>
                </el-input>
              </el-col>
              <el-col :span = '2' class = 'el-input-group__prepend_row'>
                <el-input :disabled = "isDisabled" v-model = 'drawRoadCity' placeholder = '道路所属城市'></el-input>
              </el-col>
              <el-col :span = '4' class = 'el-input-group__prepend_row'>
                <el-input v-model = 'drawRoad' placeholder = '请输入道路名称' :disabled = 'isDisabled'>
                  <el-button v-if = "!isDisabled" slot = "append" @click = 'drawRoadMethod'>绘制道路</el-button>
                </el-input>
              </el-col>
              <el-col :span = '6' class = 'el-input-group__prepend_row'>
                <el-input v-model = 'drawRoadEnd' placeholder = '请输入道路终点' :disabled = 'isDisabled'>
                  <el-input slot = "prepend" :disabled = "isDisabled" v-model = 'drawRoadStart' placeholder = '请输入道路起点'></el-input>
                  <el-button v-if = "!isDisabled" slot = "append" @click = 'drawRoadMethodStart'>绘制道路</el-button>
                </el-input>
              </el-col>
            </el-row>
            <div id = 'myMap_Gis' v-if = "dialogSelectVisible && uiType === 'GIS_Draw_Line'"></div>
          </div>
          <!-- 图片获取位置 -->
          <div v-else-if = "uiType === 'PicXY'">
            <div v-if = 'picImgSrc'>
              <el-row style = 'margin-bottom:10px;'>
                <el-col :span = '10'>
                  该点距左上角left值为：<el-input disabled v-model = 'picX'></el-input>
                </el-col>
                <el-col :span = '10' :offset = '1'>
                  该点距左上角top值为：<el-input disabled v-model = 'picY'></el-input>
                </el-col>
              </el-row>
              <div class = 'outContent'>
                <div class = 'innerContent'>
                  <div id = 'pickImgContent'>
                    <img @click = "!isDisabled ? getClickPoint($event) : ''" :src = "picImgSrc" alt="">
                    <span class = 'locationIcon' v-if = 'picX' :style = "{left: picX - 10 + 'px', top: picY - 16 + 'px'}"><i class = 'iconfont icon-ditu1'></i></span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>暂无图片信息</div>
          </div>
        </el-form-item>
        <el-form-item v-show = "!isDisabled" class = 'form_noLeftMargin' style = "padding-bottom:10px;">
          <el-button type = "info" @click = "closeDialog">取 消</el-button>
          <el-button type = "primary" @click = "defineExport" v-show = "uiType === 'RichText'">导 出</el-button>
          <el-button type = "primary" @click = "reDraw" v-show = "uiType === 'GIS_Draw_Line' && !isDisabled">重 绘</el-button>
          <el-button type = "primary" @click = "handleSubmit">确 定</el-button>
        </el-form-item>
        <el-form-item v-show = "isDisabled && uiType === 'RichText'" class = 'form_noLeftMargin' style = "padding-bottom:10px;">
          <el-button type = "primary" @click = "defineExport">导 出</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 上传文件
import FmUpload from '@/components/common/TheUpload.vue'
// 上传图片
import FmUploadPic from '@/components/common/TheUploadPic.vue'
// 富文本
import TinymceComponent from '@/components/Tinymce/TinymceComponent'
// MD编辑器
import EditorMd from '@/components/EditorMd/EditorMd'
// JSONEditor编辑器
import EditorMdJson from '@/components/EditorMd/EditorMdJson'
// pop弹窗
import PopSelect from './PopSelect.vue'
export default {
  props: ['editElementObj', 'showEditElementDataDialog', 'currentPageModelsObj'],
  components: {
    FmUpload, FmUploadPic, TinymceComponent, EditorMd, EditorMdJson, PopSelect
  },
  data () {
    return {
      dialogSelectVisible: false,
      dialogSelectTitle: '编辑字段信息',
      formModel: {
        editData: null
      },
      dialogLabel: '',
      uiType: '',
      isDisabled: false,
      // 图片类型时，图片的url地址
      picImgSrc: '',
      picX: '',
      picY: '',
      loading: false,
      loadingText: '数据加载中...',
      location: {
        lng: null,
        lat: null
      },
      map: null,
      // 绘制道路的点的数组
      pathArray: [],
      // 绘制行政区域
      district: null,
      polygons: [],
      // 绘制区域
      drawArea: '',
      // 绘制道路
      drawRoadCity: '武汉市',
      drawRoad: '',
      // 道路起点和终点
      drawRoadStart: '',
      drawRoadEnd: '',
      defaultPathArray: [] // 检索的道路路径数组
    }
  },
  computed: {
    dialogWidth () {
      if (this.uiType === 'RichText') {
        return '95%'
      } else if (this.uiType === 'MD' || this.uiType === 'JSONEditor' || this.uiType === 'GIS_Draw_Line') {
        return '95%'
      } else if (this.uiType === 'MultiPop' || this.uiType === 'Pop') {
        return '85%'
      } else if (this.uiType === 'MapXY') {
        return '95%'
      } else if (this.uiType === 'PicXY') {
        return '855px'
      } else {
        return '50%'
      }
    }
  },
  methods: {
    // 富文本编辑器的导出功能
    defineExport () {
      this.$refs.myTinymce.exportWordMethod()
    },
    // 初始化页面信息
    initPage () {
      if (this.editElementObj) {
        // 当前页面的状态
        this.isDisabled = this.editElementObj.options.disabled
        // 获取页面展示的数据
        if (Object.keys(this.currentPageModelsObj).indexOf(this.editElementObj.model) !== -1) {
          this.formModel.editData = this.currentPageModelsObj[this.editElementObj.model]
        }
        // 获取点击的字段的类型
        this.uiType = this.editElementObj.type
        // label展示的内容
        this.dialogLabel = this.editElementObj.name
        // 标题
        let titleName = this.dialogLabel.indexOf(':') !== -1 ? this.dialogLabel.slice(0, this.dialogLabel.indexOf(':')) : this.dialogLabel
        this.dialogSelectTitle = this.isDisabled ? '查看（' + titleName + '）字段详细' : '编辑（' + titleName + '）字段内容'
        // 当为地图时--绘制坐标
        if (this.uiType === 'MapXY') {
          this.$nextTick(() => {
            this.initMap()
          })
        }
        // 当为地图时--绘制道路
        if (this.uiType === 'GIS_Draw_Line') {
          this.$nextTick(() => {
            this.initGisMap()
          })
        }
        // 当为图片时
        if (this.uiType === 'PicXY') {
          this.getPicInfo()
        }
      }
    },
    // 检索/绘制道路的方法---根据道路名称
    drawRoadMethod () {
      var _self = this
      _self.defaultPathArray = []
      if (!_self.drawRoad) {
        _self.$message({
          message: '请输入道路名称',
          type: 'warning'
        })
        return
      }
      _self.$confirm('确定要执行绘制道路的操作么,该操作将清空已绘制的道路?', '提示', {
        confirmButtonText: '确定',
        cancelButtonClass: 'el-button--info',
        cancelButtonText: '取消'
      }).then(() => {
        AMap.service(['AMap.RoadInfoSearch'], function () {
          var roadSearch = new AMap.RoadInfoSearch({
            pageSize: 100,
            pageIndex: 1,
            city: _self.drawRoadCity ? _self.drawRoadCity : ''
          })
          // 关键字查询
          roadSearch.roadInfoSearchByRoadName(_self.drawRoad, function (status, result) {
            if (status === 'no_data') {
              _self.$message({
                message: '没有获取到道路信息',
                type: 'warning'
              })
              return
            }
            let hadTheSameRoad = false
            if (result && result.roadInfo && result.roadInfo.length) {
              result.roadInfo.forEach(item => {
                if (item.name === _self.drawRoad && item.path && item.path.length) {
                  hadTheSameRoad = true
                  _self.map.clearMap() // 清空已绘制的路线
                  _self.pathArray = []
                  // 绘制行政区域
                  _self.drawBounds(1)
                  for (let i = 0; i < item.path.length; i++) {
                    _self.$set(_self.defaultPathArray, _self.defaultPathArray.length, item.path[i])
                    const polyline = new AMap.Polyline({
                      path: item.path[i],
                      strokeWeight: 2, // 线条宽度，默认为 1
                      strokeColor: 'blue', // 线条颜色
                      zIndex: 40,
                      lineJoin: 'round' // 折线拐点连接处样式
                    })
                    _self.map.add(polyline)
                  }
                  _self.map.setFitView()
                }
              })
            }
            if (!hadTheSameRoad) {
              _self.$message({
                message: '没有获取到道路信息',
                type: 'warning'
              })
            }
          })
        })
      }).catch(() => {})
    },
    // 检索/绘制道路的方法---根据道路起始点
    drawRoadMethodStart () {
      var _self = this
      _self.defaultPathArray = []
      if (!_self.drawRoadCity) {
        _self.$message({
          message: '请输入道路所属城市',
          type: 'warning'
        })
        return
      }
      if (!_self.drawRoadStart) {
        _self.$message({
          message: '请输入道路起点名称',
          type: 'warning'
        })
        return
      }
      if (!_self.drawRoadEnd) {
        _self.$message({
          message: '请输入道路终点名称',
          type: 'warning'
        })
        return
      }
      _self.$confirm('确定要执行绘制道路的操作么,该操作将清空已绘制的道路?', '提示', {
        confirmButtonText: '确定',
        cancelButtonClass: 'el-button--info',
        cancelButtonText: '取消'
      }).then(() => {
        AMap.service(['AMap.Driving'], function () {
          var drivingSearch = new AMap.Driving({
            policy: AMap.DrivingPolicy.LEAST_DISTANCE // LEAST_DISTANCE最短距离,LEAST_TIME最快捷模式,LEAST_FEE最经济模式,REAL_TRAFFIC考虑实时路况
          })
          // 关键字查询
          drivingSearch.search([
            { keyword: _self.drawRoadStart, city: _self.drawRoadCity },
            { keyword: _self.drawRoadEnd, city: _self.drawRoadCity }
          ], function (status, result) {
            if (status === 'no_data') {
              _self.$message({
                message: '没有获取到道路信息',
                type: 'warning'
              })
              return
            }
            if (result && result.routes && result.routes.length && result.routes[0].steps && result.routes[0].steps.length) {
              _self.map.clearMap() // 清空已绘制的路线
              _self.pathArray = []
              // 绘制行政区域
              _self.drawBounds(1)
              result.routes[0].steps.forEach(item => {
                _self.$set(_self.defaultPathArray, _self.defaultPathArray.length, item.path)
                const polyline = new AMap.Polyline({
                  path: item.path,
                  strokeWeight: 2, // 线条宽度，默认为 1
                  strokeColor: 'blue', // 线条颜色
                  zIndex: 40,
                  lineJoin: 'round' // 折线拐点连接处样式
                })
                _self.map.add(polyline)
              })
              _self.map.setFitView()
            } else {
              _self.$message({
                message: '没有获取到道路信息',
                type: 'warning'
              })
            }
          })
        })
      }).catch(() => {})
    },
    // 绘制道路时
    reDraw () {
      var _self = this
      // 重新绘制的方法
      if (_self.map) {
        _self.map.clearMap()
        _self.pathArray = []
        _self.drawRoad = ''
        _self.defaultPathArray = []
        // 绘制行政区域
        _self.drawBounds()
      }
    },
    // 初始化地图--绘制道路时
    initGisMap () {
      var _self = this
      _self.pathArray = []
      _self.defaultPathArray = []
      _self.drawArea = ''
      // 高德地图API功能
      /* global AMap */
      /* global AMAP_ANIMATION_BOUNCE */
      _self.map = new AMap.Map('myMap_Gis', {
        resizeEnable: true,
        zoom: 16,
        zooms: [3, 20],
        expandZoomRange: true
      }) // 创建Map实例
      // 数据格式为JSON字符串:{path: [], drawArea: ''}
      if (this.formModel.editData && this.formModel.editData.length) {
        let initDataObj = JSON.parse(this.formModel.editData)
        _self.defaultPathArray = (initDataObj.path && initDataObj.path.length) ? initDataObj.path : []
        _self.drawArea = initDataObj.drawArea
        _self.drawRoadCity = initDataObj.drawRoadCity
        _self.drawRoad = initDataObj.drawRoad
        _self.drawRoadStart = initDataObj.drawRoadStart
        _self.drawRoadEnd = initDataObj.drawRoadEnd
      }
      // 绘制行政区域
      _self.drawBounds()
      // 有道路时,就进行绘制
      if (_self.defaultPathArray.length) {
        for (let i = 0; i < _self.defaultPathArray.length; i++) {
          let polyline = new AMap.Polyline({
            path: _self.defaultPathArray[i],
            strokeColor: _self.isDisabled ? 'red' : 'blue',
            strokeWeight: _self.isDisabled ? 8 : 2,
            strokeOpacity: 1,
            zIndex: _self.isDisabled ? 50 : 40,
            strokeStyle: 'solid', // dashed
            lineJoin: 'round' // 折线拐点连接处样式
          })
          _self.map.add(polyline)
        }
      }
      // 当为可编辑状态时
      if (!_self.isDisabled) {
        let mouseTool = new AMap.MouseTool(_self.map)
        mouseTool.polyline({
          strokeColor: 'red',
          strokeWeight: 8,
          zIndex: 50,
          strokeOpacity: 1,
          strokeStyle: 'solid', // dashed
          lineJoin: 'round'
        })
        // 绘制完成时
        mouseTool.on('draw', function (e) {
          if (e.obj && e.obj.Ce && e.obj.Ce.path && e.obj.Ce.path.length) {
            _self.$set(_self.pathArray, _self.pathArray.length, e.obj.Ce.path)
          }
        })
      }
    },
    // 绘制行政区域的方法
    drawBounds (noSetView) {
      let _self = this
      if (!_self.drawArea) {
        if (_self.defaultPathArray && _self.defaultPathArray.length && !noSetView) {
          _self.map.setZoomAndCenter(14, new AMap.LngLat(_self.defaultPathArray[0][0].lng, _self.defaultPathArray[0][0].lat))
        }
        return
      }
      // 加载行政区划插件
      if (!_self.district) {
        // 实例化DistrictSearch
        var opts = {
          subdistrict: 0, // 获取边界不需要返回下级行政区
          extensions: 'all', // 返回行政区边界坐标组等具体信息
          level: 'district' // 查询行政级别为 市
        }
        _self.district = new AMap.DistrictSearch(opts)
      }
      // 行政区查询
      _self.district.search(_self.drawArea, function (status, result) {
        if (status === 'no_data') {
          _self.$message({
            message: '请输入正确的区域名称',
            type: 'warning'
          })
          return
        }
        _self.map.remove(_self.polygons) // 清除上次结果
        _self.polygons = []
        var bounds = result.districtList[0].boundaries
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            // 生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.2,
              fillColor: 'red',
              strokeColor: 'red'
            })
            _self.polygons.push(polygon)
          }
        }
        _self.map.add(_self.polygons)
        if (!noSetView) {
          _self.map.setFitView(_self.polygons) // 视口自适应
          if (_self.defaultPathArray && _self.defaultPathArray.length) {
            _self.map.setZoomAndCenter(14, new AMap.LngLat(_self.defaultPathArray[0][0].lng, _self.defaultPathArray[0][0].lat))
          }
        }
      })
    },
    // 初始化地图--获取坐标时
    initMap () {
      var _self = this
      if (_self.formModel.editData) {
        let splitA = _self.formModel.editData.split(',')
        _self.$set(_self.location, 'lat', splitA[1])
        _self.$set(_self.location, 'lng', splitA[0])
      } else {
        _self.$set(_self.location, 'lat', null)
        _self.$set(_self.location, 'lng', null)
      }
      // 高德地图API功能
      /* global AMap */
      /* global AMAP_ANIMATION_BOUNCE */
      _self.map = new AMap.Map('myMap', {
        resizeEnable: true,
        zoom: 16,
        zooms: [3, 20],
        expandZoomRange: true
      }) // 创建Map实例
      var point = ''
      if (_self.location.lat) {
        point = new AMap.LngLat(_self.location.lng, _self.location.lat)
        let markers = new AMap.Marker({
          position: point,
          animation: 'AMAP_ANIMATION_BOUNCE'
        })
        _self.map.add(markers)
      } else {
        point = new AMap.LngLat(114.307274, 30.544488)
      }
      _self.map.setCenter(point) // 设置地图显示的中心点
      // 编辑状态时，为地图添加点击事件
      if (!_self.isDisabled) {
        _self.map.on('click', function (e) {
          var pt = e.lnglat
          _self.$set(_self.location, 'lat', pt.lat)
          _self.$set(_self.location, 'lng', pt.lng)
          point = new AMap.LngLat(pt.lng, pt.lat)
          _self.map.clearMap()
          let markers = new AMap.Marker({
            position: point,
            animation: 'AMAP_ANIMATION_BOUNCE'
          })
          _self.map.add(markers)
        })
      }
    },
    // 获取图片的信息
    getPicInfo () {
      if (!this.editElementObj.metauid) {
        this.$message({
          message: '该元素还没有指定元数据表，请在元数据页面管理中进行设置',
          type: 'warning'
        })
        return
      }
      this.$store.dispatch('changRouteLoading', true)
      this.$patch('/md_form/pop/picxy/' + this.editElementObj.metauid + '/' + this.editElementObj.model, {
        is_filter_deleted: Object.keys(this.editElementObj.options).indexOf('isFilterDeleted') !== -1 ? this.editElementObj.options.isFilterDeleted : true,
        this_data: btoa(encodeURIComponent(JSON.stringify(this.currentPageModelsObj)))
      }).then(data => {
        let dataInfo = data.data.result
        if (dataInfo.code === 'success') {
          let content = decodeURIComponent(dataInfo.file)
          this.picImgSrc = 'data:image/png;base64,' + content
          if (this.formModel.editData) {
            let splitA = this.formModel.editData.split(',')
            this.picX = splitA[0]
            this.picY = splitA[1]
          } else {
            this.picX = ''
            this.picY = ''
          }
        } else {
          this.picImgSrc = ''
          this.$message({
            message: dataInfo.msg,
            type: 'error'
          })
        }
        this.$store.dispatch('changRouteLoading', false)
      })
    },
    // 获取点击点的位置
    getClickPoint (event) {
      this.picX = event.offsetX
      this.picY = event.offsetY
    },
    // 点击取消按钮时
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
      this.$emit('giveUpElementData')
    },
    // 点击确定按钮时
    handleSubmit () {
      if (this.uiType === 'MapXY') {
        if (this.location.lat) {
          this.formModel.editData = this.location.lng + ',' + this.location.lat
        }
        this.$emit('sureEditElementData', this.formModel.editData)
      } else if (this.uiType === 'GIS_Draw_Line') {
        let dataArray = []
        if (this.pathArray && this.pathArray.length) {
          dataArray = JSON.parse(JSON.stringify(this.pathArray))
        } else {
          if (this.defaultPathArray && this.defaultPathArray.length) {
            dataArray = JSON.parse(JSON.stringify(this.defaultPathArray))
          }
        }
        // 数据格式为JSON字符串:{path: [], drawArea: ''}
        let dataObj = {
          path: dataArray,
          drawArea: this.drawArea,
          drawRoad: this.drawRoad,
          drawRoadCity: this.drawRoadCity,
          drawRoadStart: this.drawRoadStart,
          drawRoadEnd: this.drawRoadEnd
        }
        this.$emit('sureEditElementData', JSON.stringify(dataObj))
      } else if (this.uiType === 'PicXY') {
        if (this.picX) {
          this.formModel.editData = this.picX + ',' + this.picY
        }
        this.$emit('sureEditElementData', this.formModel.editData)
      } else if (this.uiType === 'MD') {
        // 获取MD的值
        this.$refs.myMD.getMdValue()
        this.$nextTick(() => {
          this.$emit('sureEditElementData', this.formModel.editData)
        })
      } else if (this.uiType === 'JSONEditor') {
        // 获取JSONEditor的值
        this.$refs.myJSONEditor.getMdValue()
        if (this.formModel.editData === 'JsonError') {
          return
        }
        this.$nextTick(() => {
          this.$emit('sureEditElementData', this.formModel.editData)
        })
      } else if (this.uiType === 'Pop' || this.uiType === 'MultiPop') {
        // 获取pop的值
        this.$refs.myPopSelect.getPopValue()
        this.$nextTick(() => {
          this.$emit('sureEditElementData', this.formModel.editData)
        })
      } else {
        this.$emit('sureEditElementData', this.formModel.editData)
      }
    }
  },
  watch: {
    showEditElementDataDialog: {
      handler: function (val, oldVal) {
        this.dialogSelectVisible = val
        if (this.map) { // 注销地图对象，并清空地图容器
          this.map.destroy()
          this.map = null
        }
        if (val) {
          this.initPage()
        }
      },
      deep: true
    }
  }
}
</script>

<style lang='scss' scoped>
#myMap{
  width: 100%;
  height: 500px;
}
#myMap_Gis {
  width:100%;
  height: 700px;
}
#pickImgContent{
  width:100%;
  height:500px;
  overflow: auto;
  position:relative;
  img{
    cursor:pointer;
  }
  .locationIcon{
    position:absolute;
    width:30px;
    height:30px;
    text-align:center;
    line-height:30px;
    i{
      font-size:30px;
      color:red;
    }
  }
}
.outContent{
  position:relative;
  width:100%;
  height:500px;
}
.innerContent{
  position:absolute;
  width:100%;
  left:0;
  top:0;
  z-index:1000;
}
@media (max-height: 768px) {
  #myMap_Gis {
    width:100%;
    height: 500px;
  }
}
</style>
